<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<style type="text/css">
			.membermain{
				width: 100%;
			}
			
			.place button{
				width:100%;
				color: #676664 !important;
			    border: 0 !important;
			    padding: 11px 15px;
			 	text-align: right;
			}
			.place{
				width: 65%;
			}
			.inpr{
				text-align: right;
			}
			.mui-input-row .mui-btn {
			    float: right;
			    width: 60%;
			    padding: 11px 15px;
			}
			.borbot{
				border-bottom: 1px solid #BBBBBB;
			}
			.name>div,.content>div,.footbz>div{
				padding: 2px;
			}
			.name,.content,.footbz{
				padding: 2%;
				background-color: white;
				margin: 0.3em 0;
			}
			
			
			 input[type=radio]{
        /*去除浏览器默认样式*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        /*自定义样式*/
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 1.5em;
		height: 1.5em;
        border: 1px solid #00bfff;
        outline: none;
        cursor: pointer;
        /*设置为圆形，看起来是个单选框*/
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }
 
    /**
    * 单选框 选中之后的样式
    **/
    input[type=radio]:after{
        content: '';
        position: absolute;
        width: 0.5em;
        height: 0.5em;
        display: block;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: #00bfff;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
        /*增加一些动画*/
        -webkit-transition : all ease-in-out 300ms;
        -moz-transition : all ease-in-out 300ms;
        transition : all ease-in-out 300ms;
    }
    input[type=radio]:checked:after{
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }
input[type=text]{
       text-align: right;
    }
    input[type=number]{
       text-align: right;
    }
    .radiocss{
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	height: 100%;
    }
    
    .padd05{
    	padding: 0.5em 0.5em;
    }
    .dlkg{
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	padding: 0.5em 0.5em;
    }
    .dlkg>.mui-input-row{
    	width: 50%;
    }
    .mui-input-row{
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    }
    .mui-input-row .mui-switch {
    float: right;
    margin-top: 5px;
    margin-right: 5px;
}

.addimgdiv{
	width: 100%;
	text-align: center;
}
.addimgdiv>img{
	max-width: 50%;
}
*{
	font-size: 0.95em;
}
.smimg{
				display: inline-block;
				width: 10%;
			}
.mui-input-row .smimg{
				position: relative;
			    float: right;
			    width: 10%;
			    margin-bottom: 0;
			    padding-left: 0;
			    border: 0;
			   	padding-top: 5px;
			}
			.smimg>img{
				width: 100%;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">新增商品</h1>
		    <div class="ic mui-icon-right-nav mui-pull-right" id="addgoods">保存</div>
		</header>
		<div class="mui-content">
		    <div class="membermain">
		    	<div class="name">
		    		<div class="mui-input-row borbot">
		    		    <label>商品名称:</label>
		    		    <input id="product_name" type="text" placeholder="请输入商品名称">
		    		</div>
		    		<div class="mui-input-row borbot">
		    		        <label>条码编码:</label>
		    		        <input id="bar_code" type="number" placeholder="请输入条形码">
		    		        <div class="smimg" id="goscann">
			    				<img class="" src="../img/saomiao.png"/>
			    			</div>
		    		</div>
		    		<div class="mui-input-row borbot" >
		    			<label>分类:</label>
			    		<div class="place items">
						    <button id='level' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">分类选择</button>
						</div>
		    		</div> 
		    		
		    		<div class="mui-input-row borbot" >
		    			<label>商品类型:</label>
			    		<div class="radiocss" >
						    <input type="radio"  name="radio1" id="" value="1" checked />
						    <span class="padd05">
						    	商品
						    </span>
						    <input type="radio"  name="radio1" id="" value="2" />
						    <span class="padd05">
						    	服务/次卡项目
						    </span>
						</div>
		    		</div> 
		    		
		    	</div>
		    	<div class="content">
		    		
		    		<div class="mui-input-row borbot">
		    		    <label>零售价</label>
		    		    <input id="retail_price" type="number" class="inpr" placeholder="请输入零售价">
		    		</div>
		    		<div class="borbot">
		    			<div class="mui-input-row">
		    		    <label class="wsnowrap">会员价</label>
		    		    <input id="member_price" type="number" class="inpr" placeholder="请输入会员价">
		    			</div>
		    			<!--
                        	作者：592176224@qq.com
                        	时间：2019-01-17
                        	描述：
		    			<div class="mui-input-row ">
		    			<label class="wsnowrap">折扣方式</label>
			    		<div class="place items" >
						    <button id='gender' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">折扣方式</button>
						</div>
		    			</div>
                        -->
		    		</div>
		    		
		    		<div class="mui-input-row borbot">
		    		    <label>进货价</label>
		    		    <input id="buy_price" type="number" class="inpr" placeholder="请输入会员进货价">
		    		</div>
		    		<div class="mui-input-row borbot">
		    		    <label>库存数量</label>
		    		    <input id="stock"  type="number" class="inpr" placeholder="请输入库存数量">
		    		</div>
		    		<div class="mui-input-row borbot">
		    		    <label>有效天数</label>
		    		    <input id="expire_day"  type="number" class="inpr" placeholder="请输入有效天数">
		    		</div>
		    		<div class="dlkg borbot">
		    			<div class="mui-input-row">
		    		    <label class="wsnowrap">商品规格</label>
		    		    <input id="product_format" type="text" maxlength="6" class="inpr" placeholder="商品规格">
		    			</div>
		    			<div class="mui-input-row ">
		    				<label class="wsnowrap">单位</label>
						    <input id="product_unit" type="text" maxlength="6" class="inpr" placeholder="单位">
		    			</div>
		    		</div>
		    		
		    		<div class="mui-input-row borbot">
		    		    <label >需要积分</label>
		    		    <input id="convert_point" type="number" class="inpr" placeholder="请输入需要积分">
		    		</div>
		    		<div class="dlkg borbot">
		    			<div class="mui-input-row">
			    		    <label class="fe09 wsnowrap">积分兑换</label>
			    		    <div class="mui-switch mui-active mui-switch-blue" id="mySwitch1">
			    		        <div class="mui-switch-handle"></div>
			    		    </div>
		    			</div>
		    			<div class="mui-input-row">
			    		    <label class="fe09 wsnowrap">计算库存</label>
			    		    <div class="mui-switch mui-active mui-switch-blue" id="mySwitch2">
			    		        <div class="mui-switch-handle"></div>
			    		    </div>
		    			</div>
		    		</div>
		    		<div class="mui-input-row borbot">
		    		    <label>商品备注</label>
		    		    <input id="remark" type="text" class="inpr" placeholder="请输入商品备注">
		    		</div>
		    		<div class="mui-input-row">
		    		    <label>显示排序</label>
		    		    <input type="number" class="inpr" placeholder="请输入排序">
		    		</div>
		    	</div>
		    	
		    	<div class="footbz">
		    		上传图片
		    		<div class="addimgdiv" id="addimgdiv">
		    			<img id="imgid" src="../img/add01.png"/>
		    		</div>
		    	</div>
		    	
		    </div>
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/camera.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var sort_id = 0,	//商品分类id
			product_type = 1,	//商品类型id
			image_id = 0,		//商品图片id	旧参数
			images_id = 0,		//图片id 新参数
			images_path="";		//图片路径 （暂时弃用）
			var page=null;		//相机
			window.onload = function(){
				//通过银行卡号获取银行名称的api接口， 
				$("input[type=radio]").on("change",function(e){
					product_type = this.value;
				})
				
				//监听input
				$("#bar_code").bind("input onpropertychange",function(e){
					var value = this.value;
					if(value.length === 13){
						console.log("是13位数字数字");
						get_BarCode(value);
					}
				})
				
				
				
				//添加商品监听
				g("addgoods").addEventListener("tap",function(res){
					var isActive1 = g("mySwitch1").classList.contains("mui-active");
					var isActive2 = g("mySwitch2").classList.contains("mui-active");
					
					var data = {
						url:"/api/product/add",
						data:{
							access_token:acctoken(),
							product_name:g("product_name").value,//商品名
							bar_code: g("bar_code").value,//条码
							sort_id:sort_id==0?"":sort_id,//商品分类id
							product_type:product_type,//商品类型 1/2
							buy_price:g("buy_price").value,//进货价
							member_price:g("member_price").value,//会员价
							retail_price:g("retail_price").value,//零售价
							stock:g("stock").value||0,//库存
							product_format:g("product_format").value,//规格
							product_unit:g("product_unit").value,//单位
							convert_point:g("convert_point").value||"0",
							is_convert:isActive1?"1":"0",//是否支持积分兑换
							is_stock:isActive2?"1":"0",//是否计算库存
							images_id:images_id,
							remark:g("remark").value,//商品备注
							expire_day:g("expire_day").value||0,
						}
					}
					ajax(data,function(res){
						
						mui.toast(res.msg);
						
						back_show();
					})
					
				})
				
				//监听点击扫描
				g("goscann").addEventListener("tap",function(e){
					var list = {
                         pageid:"addgoods",
                         returnfun:"setcard_number"
            		}
                    mui.openWindow({
                        url: '../general/scanning-page.html',
                        id: 'scanning-page',
                        extras: list,
                        show: {
                            aniShow: 'zoom-fade-in',
                            duration: 300
                        },
                        waiting: {
                            autoShow: true
                        }
                });
					
				})
				mui.ready(function() {
					
				var data = {
					url:"/api/product_sort/lst",
					data:{access_token:acctoken()}
				}
				ajax(data,function(res){
					console.log("商品分类",res);
					var list1 = [];
					if(res.data.length>0){
						for(var i = 0; i < res.data.length; i++){
							var str = {value:res.data[i].id,text:res.data[i].name}
							list1.push(str);
						}
						
						var levelPicker = new mui.PopPicker();
		                levelPicker.setData(list1);
		                var level = document.getElementById('level');
		                level.addEventListener('tap', function(event) {
		                    levelPicker.show(function(items) {
		                        level.innerText = items[0].text;
		                        sort_id = items[0].value;
		                        //返回 false 可以阻止选择框的关闭
		                        //return false;
		                    });
		                }, false);
					}
				})
				
				document.getElementById("addimgdiv").addEventListener('tap', function() {
			     page.imgUp(); 
				}, false);
            page={  
                imgUp:function(){  
                    var m=this;  
                    plus.nativeUI.actionSheet({cancel:"取消",buttons:[  
                        {title:"拍照"},  
                        {title:"从相册中选择"}  
                    ]}, function(e){//1 是拍照  2 从相册中选择  
                        switch(e.index){  
                            case 1:appendByCamera(function(res){cutimage(res);});break;
                            case 2:appendByGalleryone(function(res){cutimage(res);});break;
                        }  
                    });  
                }  
                //摄像头  
            } 
				
				
            });
				
				
            
				window.addEventListener("updateimg", updateimg); //添加自定义事件，其他页面调用
			}
			
			
			function get_BarCode(bar_code){
				var data = {
					url:"/api/bar_code/detail",
					data:{
						bar_code:bar_code,
					}
				}
				ajax(data,function(res){
					console.log(res);
					if(null != data){
						g("product_format").value = res.data.product_format;
						g("product_unit").value = res.data.product_unit;
						g("product_name").value = res.data.product_name;
					}
					
				},'get')
			}
			
			//上传图片
			 function updateimg(e) {
                	var imgurl = e.detail.img;
                	getBase64Image(imgurl,function(res){
                		console.log(res.dataURL);
                		console.log(res.dataURL.length);
                	var data = {
                		url:'/api/upload/image_base64',
                		data:{
                			access_token:acctoken(),
                			images:res.dataURL
                		}
                	}
		                ajax(data,function(resp){
		                	//console.log( hurl +"/uploads/images/"+ res.data.name)
		                	//g("imgid").src = hurl +'/uploads/images/'+ resp.data.name;
		                	g("imgid").src = res.dataURL;
		                	images_id = resp.data.images_id;
		                	images_path = resp.data.name;
		                })
                })
                }
             
			//跳转图片裁剪
			function cutimage(path) {
            	console.log(path);
            		var list = {
            			 path: path,
                         //bmtype:300/240,
                         pageid:"addgoods",
                         returnfun:"updateimg"
            		}
                    mui.openWindow({
                        url: '../general/cropper.html',
                        id: 'cropper',
                        extras: list,
                        show: {
                            aniShow: 'zoom-fade-in',
                            duration: 800
                        },
                        waiting: {
                            autoShow: true
                        }
                    });
                }
			
			
			//扫码页面调用
			function setcard_number(scan){
				console.log("回调")
				g("bar_code").value = scan;
				
				get_BarCode(scan);
			}
		</script>
	</body>

</html>